<template>
  <maDialog v-model:visible="visible" :footer="false" />
</template>

<script setup>
import { runEvent } from "@/components/MaForm/types/event";
import { Modal, Drawer } from "@arco-design/web-vue";
import MaForm from "@/components/MaForm/index.vue";
import { isFunction } from "lodash";

const props = defineProps({
  component: Object
});

const visible = ref(false);
const openDialog = () => (visible.value = true);
const getDataIndex = () => props.component?.dataIndex;

const formModel = inject("formModel");
const getColumnService = inject("getColumnService");
const columns = inject("columns");
const rv = async (ev, value = undefined) =>
  await runEvent(
    props.component,
    ev,
    {
      formModel,
      getColumnService,
      columns
    },
    value
  );

const form = computed({
  get() {
    return formModel.value[getDataIndex()];
  },
  set(newVal) {
    formModel.value[getDataIndex()] = newVal;
  }
});

const maDialog = (p, ctx) => {
  const componentProps = { formList: {}, options: {} };
  const evs = {};
  Object.keys(props.component).map(key => {
    if (!/^on[A-Za-z]+/g.test(key)) {
      componentProps[key] = props.component[key];
    } else {
      if (isFunction(props.component[key])) {
        evs[key] = function () {
          const argsList = Array.prototype.slice.call(arguments);
          props.component[key](...argsList, { formModel, getColumnService, columns });
        };
      } else {
        evs[key] = function () {
          const argsList = Array.prototype.slice.call(arguments);
          rv(key, { ...argsList });
        };
      }
    }
  });
  return h(
    componentProps?.type === "drawer" ? Drawer : Modal,
    {
      ...Object.assign(componentProps, p),
      ...evs
    },
    {
      default: () =>
        h(
          MaForm,
          {
            columns: componentProps.formList,
            options: Object.assign(componentProps.options),
            modelValue: form.value,
            onSubmit: async (data, done) => await rv("onSubmit", { data, done })
          },
          componentProps?.formSlot
        ),
      ...componentProps?.dialogSlot
    }
  );
};

rv("onCreated");
onMounted(() => rv("onMounted"));

defineExpose({ openDialog, getDataIndex });
</script>
